<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>PROXY-GATEWAY CENTER</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta
            content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
            name="viewport">
    <!-- Bootstrap 3.3.5 -->
    <link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css">
    <!-- Font Awesome
    <link rel="stylesheet"
     href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css">
    <!-- Ionicons
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/ionicons.min.css">
     -->
    <link rel="stylesheet" href="/static/font-awesome/css/font-awesome.min.css">
    <!-- Theme style -->
    <link rel="stylesheet" href="/static/adminlte/css/AdminLTE.min.css">
    <!-- AdminLTE Skins. Choose a skin from the css/skins
    folder instead of downloading all of them to reduce the load. -->
    <link rel="stylesheet"
          href="/static/adminlte/css/skins/_all-skins.min.css">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">

    <header class="main-header">
        <!-- Logo -->
        <a href="/" class="logo"> <!-- mini logo for sidebar mini 50x50 pixels -->
            <span class="logo-mini"><b>PGW</b></span> <!-- logo for regular state and mobile devices -->
            <span class="logo-lg"><b>PROXY GATEWAY</b></span>
        </a>
        <!-- Header Navbar: style can be found in header.less -->
        <nav class="navbar navbar-static-top" role="navigation">
            <!-- Sidebar toggle button-->
            <a href="#" class="sidebar-toggle" data-toggle="offcanvas"
               role="button"> <span class="sr-only"></span> <span class="icon-bar"></span>
                <span class="icon-bar"></span> <span class="icon-bar"></span>
            </a>

            <div class="navbar-custom-menu">
                <ul class="nav navbar-nav">
                    <li><a href="/api/v1/logout" class="btn btn-flat">Exit</a></li>
            </div>
        </nav>
    </header>
    <!-- Left side column. contains the logo and sidebar -->
    <aside class="main-sidebar">
        <!-- sidebar: style can be found in sidebar.less -->
        <section class="sidebar">
            <!-- sidebar menu: : style can be found in sidebar.less -->
            <ul class="sidebar-menu">
            </ul>
        </section>
        <!-- /.sidebar -->
    </aside>

    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">

        <!-- /.content -->
    </div>
    <!-- /.content-wrapper -->
    <footer class="main-footer">
        <b>Proxy Gateway Version</b> 0.1
    </footer>
</div>
<!-- ./wrapper -->

<!-- jQuery 2.2.0 -->
<script src="/static/plugins/jQuery/jQuery-2.2.0.min.js"></script>
<!-- Bootstrap 3.3.5 -->
<script src="/static/bootstrap/js/bootstrap.min.js"></script>
<!-- Slimscroll -->
<script src="/static/plugins/slimScroll/jquery.slimscroll.min.js"></script>
<!-- FastClick -->
<script src="/static/plugins/fastclick/fastclick.js"></script>
<!-- AdminLTE App -->
<script src="/static/adminlte/js/app.min.js"></script>
<!-- AdminLTE for demo purposes -->
<script src="/static/js/main.js"></script>
<script src="/static/js/template.js"></script>
<script id="menu-tpl" type="text/html">
    <li class="header">菜单列表</li>
    <li class="treeview active">
        <a href="#"><i class="fa fa-folder-o"></i><span>代理配置</span><i
                class="fa fa-angle-left pull-right"></i></a>
        <ul class="treeview-menu">
            <%for(var i = 0; i < list.length; i++) {%>
            <li><a href="javascript:;"
                   onclick="domain_id=<%:=list[i].id%>;domain_name='<%:=list[i].name%>';load_page('/pages/service/list.html');"><i
                    class="fa fa-circle-o"></i><%:=list[i].name%></a></li>
            <%}%>
        </ul>
    </li>
    <li class="treeview">
        <a href="#"><i class="fa fa-laptop"></i><span>域名管理</span><i
                class="fa fa-angle-left pull-right"></i></a>
        <ul class="treeview-menu">
            <li><a href="javascript:;" onclick="load_page('/pages/domain/list.html');"><i
                    class="fa fa-circle-o text-aqua"></i><span>域名列表</span></a></li>
            <li><a href="javascript:;" onclick="load_page('/pages/domain/add.html');"><i
                    class="fa fa-circle-o text-aqua"></i><span>添加域名</span></a></li>
        </ul>
    </li>
</script>
<script type="text/javascript">
    $(function () {
        update_menu(function (domains) {
            if (domains.length > 0) {
                domain_id = domains[0].id;
                domain_name = domains[0].name;
                load_page('/pages/service/list.html');
            }
        });
    });
    function update_menu(callback) {
        api_invoke("/api/v1/domain/all", {}, function (data) {
            if (data.errno == 0) {
                var html = template($("#menu-tpl").html(), {list: data.info});
                $(".sidebar-menu").html(html);
                if (callback) {
                    callback(data.info);
                }
            } else {
                alert(data.msg);
            }
        });
    }
</script>
</body>
</html>
